// 获取元素
var getElem = function(selector){
	return document.querySelector(selector);
}
// 获取全部元素
var getAllElem = function(selector){
	return document.querySelectorAll(selector);
}
// 获取元素类名
var getCls = function(element){
	return element.getAttribute('class');
}
// 设置元素类名
var setCls = function(element,cls){
	return element.setAttribute('class',cls);
}
// 添加元素类名
var addCls = function(element,cls){
	var baseCls = getCls(element);
	if(baseCls.indexOf(cls) === -1){
		setCls(element,baseCls+ ' ' +cls);
	}
}
// 删除元素类名
var deleteCls = function(element,cls){
    var baseCls = getCls(element);
    if(baseCls != -1){
    	setCls(element,baseCls.split(cls).join(" "))
    }
}

var screenAnimateElements = {

	'.screen-1': [
		'.screen-1__heading',
		'.screen-1__phone',
		'.screen-1__shadow'
	],
	'.screen-2': [
		'.screen-2__heading',
		'.screen-2__subheading',
		'.screen-2__phone',
		'.screen-2__point',
		'.screen-2__point_1',
		'.screen-2__point_2',
		'.screen-2__point_3'
		
	],
	'.screen-3': [
		'.screen-3__heading',
		'.screen-3__subheading',
		'.screen-3__phone',
		'.screen-3__features',
	],
	'.screen-4': [
		'.screen-4__heading',
		'.screen-4__subheading',
		'.screen4__type__item_1',
		'.screen4__type__item_2',
		'.screen4__type__item_3',
		'.screen4__type__item_4'
	],
	'.screen-5': [
		'.screen-5__heading',
		'.screen-5__subheading',
		'.screen-5__bg'
	],

}
// 为所有元素添加_animate_init
var setScreenAnimate = function(screenCls){
	var screen = document.querySelector(screenCls);
	// 获取动画元素
	var animateElements = screenAnimateElements[screenCls];  
	for(var i=0;i<animateElements.length;i++){
		var elemet = document.querySelector(animateElements[i]);
		var baseCls = elemet.getAttribute('class');
		elemet.setAttribute("class",baseCls +' '+ animateElements[i].substr(1)+'_animate_init')	
	}
	
}
var playScreenAnimate = function(screenCls){
	var screen = document.querySelector(screenCls);
	// 获取动画元素
	var animateElements = screenAnimateElements[screenCls];  
		for(var i=0;i<animateElements.length;i++){
				var elemet = document.querySelector(animateElements[i]);
				var baseCls = elemet.getAttribute('class');
				elemet.setAttribute("class",baseCls.replace('_animate_init','_animate_done'))
			}
}



// 初始化所有动画元素
window.onload=function(){
	for( k in screenAnimateElements){
		setScreenAnimate(k)
	}
	setTimeout(function(){
		playScreenAnimate(".screen-1")
  //   	switchNavItemsActive(0)
	},200)
	

}



// 添加高亮提醒
var navItems = getAllElem(".header__nav-item");
var outItems = getAllElem(".outline__item");
var switchNavItemsActive = function(ids){
	for(var i=0;i<navItems.length;i++){
		deleteCls(navItems[i],"header__nav-item_status_active");
	}
	addCls(navItems[ids],"header__nav-item_status_active")

    for(var i=0;i<outItems.length;i++){
		deleteCls(outItems[i],"outline-item_status_active");
	}
	addCls(outItems[ids],"outline-item_status_active")
} 




// 滚动启动动画
window.onscroll=function(){
    var top = document.body.scrollTop;
    // 导航
    if (top>80) {
    	addCls(getElem('.header'),'header__status_back');
    }else{
    	deleteCls(getElem('.header'),'header__status_back');
    	switchNavItemsActive(0);
    }
    // 侧边栏
    if (top>800) {
    	addCls(getElem('.outline'),'outline__status_in')
    }else{
    	deleteCls(getElem('.outline'),'outline__status_in')
    }
  //   if (top>=0) {
  //   	playScreenAnimate(".screen-1")
  //   	switchNavItemsActive(0)
  //   	for(var i=0;i<navItems.length-1;i++){
  //   		deleteCls(navItems[i],'red')
  //   	}
  //   	addCls(getElem('.header__nav-item-1'),'red')
  //   	// 滑动自动定位
  //   	for(var i=0;i<navItems.length-1;i++){
		// 	if(getCls(navItems[i]).indexOf("header__nav-item_status_active") > -1){
		// 		activeIdx = i
				
		// 		break;
		// 	}
		// }
		// navTip.style.left = (activeIdx * 100) + 'px'

  //   }
    if (top>800*1 - 100) {
    	playScreenAnimate(".screen-2")
    	switchNavItemsActive(1)
    	// 滑动自动变色
    	for(var i=0;i<navItems.length-1;i++){
    		deleteCls(navItems[i],'red')
    	}
    	addCls(getElem('.header__nav-item-2'),'red')
        // 滑动自动定位
    	for(var i=0;i<navItems.length-1;i++){
			if(getCls(navItems[i]).indexOf("header__nav-item_status_active") > -1){
				activeIdx = i
				
				break;
			}
		}
		navTip.style.left = (activeIdx * 100) + 'px'
    }
    if (top>800*2 - 100) {
    	playScreenAnimate(".screen-3")
    	switchNavItemsActive(2)
    	for(var i=0;i<navItems.length-1;i++){
    		deleteCls(navItems[i],'red')
    	}
    	addCls(getElem('.header__nav-item-3'),'red')
    	// 滑动自动定位
    	for(var i=0;i<navItems.length-1;i++){
			if(getCls(navItems[i]).indexOf("header__nav-item_status_active") > -1){
				activeIdx = i
				
				break;
			}
		}
		navTip.style.left = (activeIdx * 100) + 'px'
    }
    if (top>800*3 - 100) {
    	playScreenAnimate(".screen-4")
    	switchNavItemsActive(3)
    	
    	for(var i=0;i<navItems.length-1;i++){
    		deleteCls(navItems[i],'red')
    	}
    	addCls(getElem('.header__nav-item-4'),'red')
    	// 滑动自动定位
    	for(var i=0;i<navItems.length-1;i++){
			if(getCls(navItems[i]).indexOf("header__nav-item_status_active") > -1){
				activeIdx = i
				
				break;
			}
		}
		navTip.style.left = (activeIdx * 100) + 'px'
    }
    if (top>800*4 - 100) {
    	playScreenAnimate(".screen-5")
    	switchNavItemsActive(4)
    	for(var i=0;i<navItems.length-1;i++){
    		deleteCls(navItems[i],'red')
    	}
    	addCls(getElem('.header__nav-item-5'),'red')
    	// 滑动自动定位
    	for(var i=0;i<navItems.length-1;i++){
			if(getCls(navItems[i]).indexOf("header__nav-item_status_active") > -1){
				activeIdx = i
				
				break;
			}
		}
		navTip.style.left = (activeIdx * 100) + 'px'
    }
}


// 添加导航定位功能，并高亮
var setNavJump = function(i,lib){
	var item = lib[i]
	item.onclick=function(){
		document.body.scrollTop = i * 800;
        addCls(lib[i],'header__nav-item_status_active')
	}

}
for(var i=0;i<navItems.length;i++){
	setNavJump(i,navItems);
}
for(var i=0;i<outItems.length;i++){
	setNavJump(i,outItems);
}



// 滑动门
var navTip = document.querySelector(".header__nav-item_tip");
var activeIdx = 0;
var setAniamteTip = function(idx,lib){
	lib[idx].onmouseover=function(){
		navTip.style.left = ( idx * 100) + 'px'
	}
	lib[idx].onmouseout=function(){
		for(var i=0;i<lib.length-1;i++){
			if(getCls(lib[i]).indexOf("header__nav-item_status_active") > -1){
				activeIdx = i
				
				break;
			}
		}
		console.log(activeIdx)
		navTip.style.left = (activeIdx * 100) + 'px'
	}
}
// 滑动门特效
for(var i=0;i<navItems.length-1;i++){
	setAniamteTip(i,navItems)
}
